<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom )+'px'}">
		<navbar title="沟通职位"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}" v-if="dataList.length>0">
			<view class="item-qiuzhi-box">
				<view class="item qiuzhi" v-for="item in dataList" :key="item.id" @click="toDetail(item)">
					<view class="item-qiuzhi-data">
						<view class="item-qiuzhi-line">
							<view class="item-qiuzhi-title">
								{{item.title}}
							</view>
							<view class="item-qiuzhi-price">
								{{item.isMianyi==1? '面议':Math.floor(item.workSalary) + "元/天"}}
							</view>
						</view>
						<view class="item-qiuzhi-line">
							<text>{{item.workEducation=="不限"?"学历不限":item.workEducation}}</text>
							<text>{{item.workType=="不限"?"工作形式不限":item.workType}}</text>
						</view>
						<view class="item-qiuzhi-tag" v-if="item.tip">
							<view v-for="tag in item.tip.split(',')">{{tag}}</view>
						</view>
					</view>
					<view class="item-qiuzhi-bottom">
						<view class="item-qiuzhi-user" @click="toCompany">
							<view class="item-qiuzhi-user-picdir">
								<image :src="baseImage + item.picdir" mode="" v-if="item.picdir"></image>
								<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
							</view>
							<view class="item-qiuzhi-user-name">
								{{item.companyTitle}}
							</view>
						</view>
					
						<view class="item-address">
							{{`${item.city.includes('/')? item.city.split('/')[2]:item.city}`}}
							<br />
							<view class="item-date">
								{{item.timeCreate.split(" ")[0]}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-else></empty>
		<view class="main-bj">

		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {getQiyeFavList} from "@/core/web-api/qiyeduan.js"
	import {getQiuzhiGoutongList} from "@/core/web-api/qiuzhiduan.js"
	import Empty from "@/components/Empty.vue"
	export default {
		components:{
			Navbar,
			Empty
		},
		data() {
			return {
				dataList: [],
				bottomBtnHeight: uni.upx2px(90),
				page:{
					current:1,
					limit:10
				}
			}
			
			
		},
		methods: {
			/**
			 * 跳转详情
			 */
			toDetail(item){
				if(this.type==1){
					uni.navigateTo({
						url:"/pages/web/rencaiDetail?id=" + item.id
					})
				}else{
					uni.navigateTo({
						url:"/pages/web/gangweiDetail?id=" + item.id
					})
				}
			},
			
			/**
			 * 加载数据列表
			 */
			getDataList(){
				if(this.type==1){
					
				}else{
					this.getQiuzhiDataList();
				}
			},
			
			
			/**
			 * 加载求职者收藏企业列表
			 */
			getQiuzhiDataList(){
				getQiuzhiGoutongList({
					...this.page
				}).then(res=>{
					if(res.code==20000){
						if(this.page.current==1){
							this.dataList = res.data.list;
						}else{
							this.dataList.push(...res.data.list)
						}
						this.total = res.data.total;
					}
				})
			},
			
			/**
			 * 加载分页数据
			 */
			pageDataList(){
				if(this.total == this.dataList.length) return;
				this.page.current++;
				this.getDataList()
			},
		},
		onReachBottom() {
			this.pageDataList()
		},
		onShow() {
			this.page.current = 1;
			this.getDataList()
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['type','baseImage','imgUrl','usual'])
		},
		
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}

	.item {
		&-box {
			width: 100%;
			margin-top: 36upx;
			position: static;
			z-index: 2;
		}

		background-color: #fff;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		border-radius: 8upx;
		padding:30upx;
		box-sizing: border-box;
		margin-bottom: 40upx;
		
		&-qiuzhi{
			width: 100%;
			margin-top: 36upx;
			position: static;
			z-index: 2;
			&-more {
				width: 100%;
				display: flex;
				justify-content: center;
			
				&.rorate {
					transform: rotate(180deg);
				}
			}
			
			&-data {
				position: relative;
			}
			
			&-date {
				position: absolute;
				bottom: 4upx;
				right: 0;
				font-size: 20upx;
				color: #999999;
			}
			
			&-line {
				display: flex;
				align-items: center;
				margin-bottom: 15upx;
			
				text {
					font-size: 26upx;
					color: #666666;
					display: block;
					height: 26upx;
					line-height: 26upx;
			
					&:nth-child(2) {
						padding-left: 10upx;
						margin-left: 10upx;
						border-left: 2upx solid #666;
					}
				}
			}
			
			&-title {
				flex: 1;
				font-size: 34upx;
				color: #000;
				font-weight: bold;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 使用省略号表示超出部分 */
			}
			
			&-price {
				font-size: 30upx;
				color: #0180ff;
			}
			
			&-tag {
				display: flex;
				flex-flow: wrap;
				margin-top: 15upx;
			
				view {
					font-size: 20upx;
					color: #333333;
					height: 38upx;
					padding: 0 14upx;
					border-radius: 19upx;
					background-color: #d0e0fd;
					margin-right: 20upx;
					line-height: 38upx;
				}
			}
			
			&-bottom {
				width: 100%;
				display: flex;
				margin-top: 25upx;
				padding: 16upx 0upx 0 0;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				border-top: 2upx solid #f8f8f8;
			}
			
			&-user {
				display: flex;
				align-items: center;
			
				&-picdir {
					width: 54upx;
					height: 54upx;
					border-radius: 50%;
					border: 2upx solid #bcbcbc;
					box-sizing: border-box;
			
					image {
						width: 54upx;
						height: 54upx;
						border-radius: 50%;
					}
				}
			
				&-name {
					margin-left: 10upx;
					font-size: 22upx;
					color: #999999;
				}
			}
			
			&-date {
				font-size: 20upx;
				color: #999999;
			}
			
			&-status {
				font-size: 25upx;
				color: #333333;
			}
			
			&-info {
				line-height: 1.5;
			
				&-box {
					margin-top: 20upx;
				}
			
				text {
					font-size: 26upx;
					color: #666666;
				}
				&.analysis{
					
					width: 100%;
					font-size: 26upx;
					color: #666666;
					min-height: 200upx;
				}
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
		&-basic{
			width: 100%;
			display: flex;
		}
		&-brief{
			font-size: 26upx;
			color: #666666;
			margin-bottom: 20upx;
			margin-top: 10upx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		&-desc{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2upx solid #f6f6f6;
			padding-top: 20upx;
		}
		&-date{
			font-size: 22upx;
			color:#999999;
		}

		&-data {
			flex: 1;
			padding-right: 20upx;
			box-sizing: border-box;

			&-title {
				font-size: 34upx;
				color: #000000;
				font-weight: bold;
				margin-bottom: 10upx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 使用省略号表示超出部分 */
			}

			&-line {
				display: flex;
				align-items: center;
				margin-top: 4upx;

				text {
					font-size: 26upx;
					color: #666666;
				}

				&.tag {
					margin-bottom: 6upx;
				}
			}

			&-info {
				display: flex;
				align-items: center;

				text {
					font-size: 22upx;
					color: #808080;
					margin-left: 10upx;
					border-left: 3upx solid #808080;
					display: block;
					padding-left: 10upx;
					height: 24upx;
					line-height: 24upx;

					&:first-child {
						margin-left: 0;
						border-left: 0;
						padding-left: 0;
					}
				}
			}
		}

		&-user {
			display: flex;
			flex-direction: column;
			align-items: center;

			&-picdir {
				width: 110upx;
				height: 110upx;
				border: 2upx solid #c5c5c5;
				border-radius: 50%;
				position: relative;

				image {
					width: 110upx;
					height: 110upx;
					border-radius: 50%;
				}
			}

			&-sex {
				position: absolute;
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				right: -10upx;
				top: -10upx;

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
		&-address {
			font-size: 20upx;
			color: #333333;
			text-align: right;
			line-height: 1.5;
		}
	}

	
</style>